<template>
    <div v-if="show" class="wordCard rounded">
        <ul class="list-group list-group-flush">
            <li class="list-group-item"
            v-for="(item , index ) in wtype" :key=index
            >{{item}} {{wmeaning[index]}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props:{
        "meaning": {
            type: String,
            default : ""
        }
    },
    data(){
        return {
            wtype: [],
            wmeaning:[],
            show: false
        };
    },
    watch:{
        meaning : function( newval , oldval ){
            if( newval == "" ){
                this.show = false;
            }
            this.classifyWordMeaning(newval);
        }
    },
    methods:{
       classifyWordMeaning( str ){
        //    let mReg = /[(prep)(pron)(n)(v)(conj)(s)(sc)(o)(oc)(vi)(vt)(aux.v)(adj)(adv)(art)(num)(int)(u)(c)(pl)]./g;
           
        //    let mReg = /([(n)|(v)|(vt)].(\w+)[.|$])/g;
           let fReg = /((prep)|(pron)|(n)|(v)|(conj)|(s)|(sc)|(o)|(oc)|(vi)|(vt)|(aux.v)|(adj)|(adv)|(art)|(num)|(int)|(u)|(c)|(pl))\./g;
        //    let mReg = /([(prep)|(pron)|(n)|(v)|(conj)|(s)|(sc)|(o)|(oc)|(vi)|(vt)|(aux.v)|(adj)|(adv)|(art)|(num)|(int)|(u)|(c)|(pl)]\.)[(prep)|(pron)|(n)|(v)|(conj)|(s)|(sc)|(o)|(oc)|(vi)|(vt)|(aux.v)|(adj)|(adv)|(art)|(num)|(int)|(u)|(c)|(pl)]*/g;
        //    let mReg = /((n)|(adj)\.)(\w*)((n)|(adj))\.?/g;

           let flags = str.match(fReg);
           let flagsIndex = [];
           for(let i = 0 ; i < flags.length ; i++){
               flagsIndex.push( str.indexOf( flags[i] ) );
           }
           let result = [];
           for(let i = 0 ; i <= flagsIndex.length - 1 ; i++){
               if( i != flagsIndex.length - 1 ){
                    result.push( str.substring(flagsIndex[i] + flags[i].length , flagsIndex[i+1]) );
               }else{
                   result.push( str.substring(flagsIndex[i] + flags[i].length , str.length) );
               }
           }
           this.wtype = flags;
           this.wmeaning = result;
           this.show = true;
       }    
    }
}
</script>

<style lang="scss">

.wordCard{
    min-height: 10em; 
    background-color: white;
    padding: 1.3em;
    margin-bottom: 1em;
    text-align: left !important;
}
</style>